---
import type { CollectionEntry } from "astro:content";
import BaseHead from "../components/BaseHead.astro";
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";

type Props = CollectionEntry<"blog">["data"];

const { title, description, pubDate, readingTime, draft } = Astro.props;
---

<html lang="en">
  <head>
    <BaseHead title={title} description={description} />
  </head>

  <body>
    <Header />
    <main>
      <article>
        <h1>{title}</h1>

        <div class="pt-4 text-neutral-200">
          <div class="flex gap-x-2 items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-5 h-5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5"
              ></path>
            </svg>

            <time class="text-base">{pubDate}</time>
          </div>

          <div class="flex gap-x-2 items-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              stroke-width="1.5"
              stroke="currentColor"
              class="w-5 h-5"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>

            <span class="text-base">{readingTime}</span>
          </div>
        </div>
        {draft && <h1>[Draft]</h1>}
        <hr class="border-(t t-neutral-700) my-8" />
        <slot />
      </article>
    </main>
    <Footer />
  </body>
</html>
